教學原文參考：手把手教學 Camera Web Server 相機應用

一、簡介

本篇教學要帶領讀者們一起運用 Pixel:Bit 上內建的 500 萬像素鏡頭，實作 ESP32 官方範例
CameraWebServer，將會手把手的帶著大家進行細部使用教學，除了相機的設定操作外，還包含了人臉偵測與人臉識別等操作。藉由熟悉相機功能的操作，將會有助於後續開發使用
Pixel:Bit 實作各類型的相機專案！本教學為 ESP32 原生範例修改而來，若是使用 ESP32-CAM
操作也是相容的，只在使用不同的攝影鏡頭之差異而已。

二、所需設備

1. Pixel:Bit x1

2. Micro USB to USB Type-A 數據傳輸線 x1

三、範例程式碼

首先需要在 Arduino IDE 上安裝好 ESP32 開發板支援程式庫，若不清楚如何安裝的夥伴們可以參考「Pixel:Bit 教學(二) – ESP32 與 ATmega328P 的 UART 通訊」教學。本教學完整範例程式可由 GitHub 上取得 PixelBit 範例程式，內含 Pixel:Bit 所有範例，並且會不定時更新。

本篇文章將會使用到其中「02_CameraWebServer」的程式碼。為方便起見，我們可以直接下載整個範例程式壓縮檔，再解壓縮到電腦裡的 Arduino 資料夾下， 範例程式如下圖所示：

Pixel:Bit 範例程式檔案庫

1. 範例程式使用

使用 Arduino IDE 開啟 PixelBit_CameraWebServer_ESP32，在程式碼 25、26 行的地方，填入所處環境 Wi-Fi 的 SSID 與密碼設定（注意！大小寫有分別），完成後選定對應的開發板（AI Thinker ESP32-CAM）以及序列埠後，並將 UART Selector 切到 ESP32 的位置，點選 Arduino IDE 的上傳圖示進行程式的上傳與燒錄。

填入 Wi-Fi SSID 名稱與密碼

燒錄完成後
Pixel:Bit 會自動重新開機，可以在 Arduino IDE 序列埠監控視窗上看到其所得到的 IP
位置。若一直重複顯示「.」的符號，可能是 SSID 與密碼輸入錯誤，或者是所在位置 Wi-Fi 訊號不良，造成連線時間較長。接著開啟瀏覽器輸入
IP 位置，就可以顯示 Camera WEB UI 的介面了。

序列埠顯示 Pixel:Bit 之 IP 位置

2. 相機參數設定 Camera Setting

網頁開啟後可以看到左側有一整排的參數設定選項，各項相機細部參數可以藉由下拉式選單或是滑桿進行設定，右側空白處也可以顯示即時的畫面預覽。下方有三個按鈕「Get Still」、「Strat Stream」、「Enroll Face」分別可以取得單張照片截圖、開啟即時串流、加入人臉設定（後續會進行詳細的說明）等功能。

Camera WEB Server 的網頁圖形化介面

接下來介紹幾個常用的相機設定：

• Resolution 影像解析度：Pixel:Bit 所搭配的 500 萬畫素相機 OV5640，最高解析度可達
  2560×1920 的 2K 影像，相較於最高 FHD（1920 x 1080）的 OV2640，除了像素較高外，OV5640
  還可以做到直立式的 P FHD（1080 x
  1920），也有利於行動裝置影片素材的拍攝。當然解析度越高所依賴的處理能力也越高，預覽畫面中的延遲也會越高。這邊就可以依據要做單張照片拍攝或是即時串流來決定影像的解析度。
• Quality 影像品質：範圍為 4~63 之間，數值越小代表影像品質越好，但相對也會耗費更多的運算資源，一般建議設定在 10 ~ 20 之間，取得效能與品質之間的平衡。
• Brightness 亮度：數值範圍 -3 ~ 3 之間，數值越大代表亮度越高。
• Contrast 對比：數值範圍 -3 ~ 3 之間，數值越大代表對比越高。
• Saturation 飽和：數值範圍 -4 ~ 4 之間，數值越大代表色彩越呈飽和紅潤。
• Special Effect 特效：可以選擇負片、灰階、紅色調、綠色調、藍色調等效果。
• AWB Enable 白平衡：開啟後會啟用自動白平衡，也可同時開啟下方 Manual AWB 手動白平衡，進行手動選擇白平衡 profile，如晴天（Sunny）、陰天（Cloudy）、日光燈（Office）、鎢絲燈（Home）等。
• H-Mirror & V-Flip：水平鏡像與垂直翻轉，若將 Pixel:Bit 當作相機或是倒置擺放的情況下此兩個選項非常實用。

其餘進階功能一般狀況下比較用不到，有興趣的讀者也可以自行研究。

請接續「Camera Web Server 相機應用（Part 2）」。

更多有趣系列教學文章

• CIRCUS Pi 技術文章
• Pixel:Bit 系列
• AI 人工智慧
• IoT 物聯網
• LinkIt 系列
• Arduino 系列
• micro:bit 系列
• M5Stack 系列
• ESP32 系列
• Jetson Nano 系列
• Raspberry Pi 樹莓派 系列
• ROS 機器人作業系統
• Maker 手作品